// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件，否则报错
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import Message from "@/pages/Message.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/Detail.vue";

// 创建一个路由器。其中VueRouter是一个构造函数
const router = new VueRouter({  // 【todo 其中该对象是配置对象，不是自己定义的对象，必须按照配置对象里面的配置属性进行书写】。
    // mode可选值：hash值、history值
    mode: "hash",
    routes: [
        {
            name: 'about', // 命名路由
            // 一级路由
            path: "/about", // 如果访问的/about路径，就访问的是About组件
            component: About,
            // 【其中如果meta不进行配置的话，就拿到的是underfined，那么underfined就是false】
            // meta代表的是元信息，其中该meta元信息，可以配置一些参数，供路由守卫进行使用
            meta: {
                isAuth: true,
                title: '关于',
            },
        },
        {
            name: 'home', // 命名路由
            // 一级路由
            path: "/home", // 如果访问的是/home路径，就访问的是Home组件
            component: Home,
            // 【其中如果meta不进行配置的话，就拿到的是underfined，那么underfined就是false】
            // meta代表的是元信息，其中该meta元信息，可以配置一些参数，供路由守卫进行使用
            meta: {
                isAuth: true,
                title: '主页',
            },
            // 二级路由
            children: [
                {
                    name: 'news', // 命名路由
                    // 如果是二级路由的话，其中path里面的路径前面不需要加/，而vue框架会自动将/添加上去
                    path: "news",
                    component: News,
                    // 【其中如果meta不进行配置的话，就拿到的是underfined，那么underfined就是false】
                    // meta代表的是元信息，其中该meta元信息，可以配置一些参数，供路由守卫进行使用
                    meta: {
                        isAuth: true,
                        title: '新闻',
                    },
                    // // 独享路由守卫就是某个组件独享的路由守卫。
                    // // 【独享路由守卫，其中独享路由守卫只有前置，没有后置】，进入到该路由之前会调用该独享路由守卫
                    // beforeEnter: (to, from, next) => {
                    //     // 【其中如果是多个路由组件需要控制的话，可以通过meta元信息进行配置】
                    //     // 如果school的值是尚硅谷的话，就放行，否则不放行。且组件News、Message组件不放行
                    //     console.log('to.meta:', to.meta);
                    //     console.log('to.meta.isAuth:', to.meta.isAuth);
                    //     if (to.meta.isAuth) { // 判断是否需要鉴权
                    //         console.log('school:', window.localStorage.getItem("school"));
                    //         if (window.localStorage.getItem("school") === '尚硅谷') {
                    //             // 其中next()调用的作用是放行。
                    //             next();
                    //         } else {
                    //             alert("从 localStorage 取出来的school值不是尚硅谷，无权限，请检查！")
                    //         }
                    //     } else {
                    //         // 其中next()调用的作用是放行。
                    //         next();
                    //     }
                    // },
                },
                {
                    name: 'message', // 命名路由
                    path: "message",
                    component: Message,
                    // 【其中如果meta不进行配置的话，就拿到的是underfined，那么underfined就是false】
                    // meta代表的是元信息，其中该meta元信息，可以配置一些参数，供路由守卫进行使用
                    meta: {
                        isAuth: true,
                        title: '消息',
                    },
                    // 三级路由，一般最多不会超过六级路由
                    children: [
                        {
                            name: 'detail', // 命名路由
                            // 路由可以携带 params 参数，其中:xxx就是占位符
                            path: "detail/:id/:content/:origin/:author/:category",
                            meta: {
                                isAuth: true,
                                title: '详情',
                            },
                            component: Detail,
                            // props写法一【使用少，写的数据是模拟数据】：props的第一种写法，值为对象。其中props谁接受写到谁那里去。
                            // 该对象中的所有key-value都会以props的形式传递给Detail组件。
                            // props: {
                            //     a: 1,
                            //     b: 'hello',
                            // }

                            // props写法二：值为布尔值，如果布尔值为真的话，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
                            // props: true,

                            // props写法三，函数写法，可以省略:function。其中该函数是一个回调函数，写到此处之后，vue会帮助调用
                            // props: function ($route) {
                            //     return {
                            //         id: $route.params.id,
                            //         content: $route.params.content,
                            //         origin: $route.params.origin,
                            //         author: $route.params.author,
                            //         category: $route.params.category,
                            //
                            //         // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                            //         // id: $route.query.id,
                            //         // content: $route.query.content,
                            //         // origin: $route.query.origin,
                            //         // author: $route.query.author,
                            //         // category: $route.query.category,
                            //     }
                            // }

                            // props写法三的解构赋值
                            // props: function ({params}) {
                            //     return {
                            //         // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                            //         id: params.id,
                            //         content: params.content,
                            //         origin: params.origin,
                            //         author: params.author,
                            //         category: params.category,
                            //     }
                            // }

                            // props写法三的解构赋值，是解构赋值的连续写法
                            props: function ({params: {id, content, origin, author, category}}) {
                                return {
                                    // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                                    id: id,
                                    content: content,
                                    origin: origin,
                                    author: author,
                                    category: category,
                                }
                            }
                        }
                    ]
                }
            ]
        },
    ]
})

// // 暴露VueRouter之前进行路由守卫操作。在每一次路由切换之前进行调用该函数进行路由守卫。
// // 全局前置路由守卫：初始化的时候被调用，每次路由切换之前被调用。
// router.beforeEach((to, from, next) => {
//     console.log('全局前置路由守卫，每次路由切换之前被调用！', 'from：', from, '，to：', to);
//
//     // // 如果school的值是尚硅谷的话，就放行，否则不放行。且组件News、Message组件不放行
//     // if (to.path === '/home/news' || to.path === '/home/message') {
//     //     if (window.localStorage.getItem("school") === '尚硅谷') {
//     //         // 其中next()调用的作用是放行。
//     //         next();
//     //     } else {
//     //         alert("从 localStorage 取出来的school值不是尚硅谷，无权限，请检查！")
//     //     }
//     // } else {
//     //     // 其中next()调用的作用是放行。
//     //     next();
//     // }
//
//     // 【其中如果是多个路由组件需要控制的话，可以通过meta元信息进行配置】
//     // 如果school的值是尚硅谷的话，就放行，否则不放行。且组件News、Message组件不放行
//     console.log('to.meta:', to.meta);
//     console.log('to.meta.isAuth:', to.meta.isAuth);
//     if (to.meta.isAuth) { // 判断是否需要鉴权
//         console.log('school:', window.localStorage.getItem("school"));
//         if (window.localStorage.getItem("school") === '尚硅谷') {
//             // 其中next()调用的作用是放行。
//             next();
//         } else {
//             alert("从 localStorage 取出来的school值不是尚硅谷，无权限，请检查！")
//         }
//     } else {
//         // 其中next()调用的作用是放行。
//         next();
//     }
// })
//
// // 全局后置路由守卫，初始化的时候被调用，每次路由切换之后被调用
// router.afterEach((to, from) => {
//     console.log('全局后置路由守卫，每次路由切换之后被调用！', 'from：', from, '，to：', to);
//     // 浏览器页签的title标题
//     document.title = to.meta.title || '尚硅谷牛逼系统';
// })

// 暴露VueRouter
export default router;

